/* less 文件 (移动端通用less文件)
* 作者 Aaron
* 时间 2017/12/14
* 协议 MIT 
* 只考虑webkit内核手机浏览器和IE内核浏览器
* @charset "utf-8";
*/

.clearfix() {
    *zoom: 1;
    &:before, &:after {
        display: table;
        content: "";
        line-height: 0;
    }
    &:after {
        clear: both;
    }
}

// 居中
.center-block() {
    margin-left: auto;
    margin-right: auto;
}

// 左右浮动
.fl() {
    float: left;
    *display: inline;
}

.fr() {
    float: right;
    *display: inline;
}

.inline-block() {
    /* 如果有必要可在其父元素上应用样式vertical-align:top; */
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

.text-overflow() {
    // 文字溢出隐藏显示省略号，需要用在与文字最近的一个block|inline-block的祖先元素上(ie6中该元素的width需要显性的声明且不能为auto,100%是可行的) 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 渐变
.linear-gradient(@direction: top;
@a: #ffa600;
@b: #fe9200) {
    background-image: -webkit-linear-gradient(@direction, @a, @b);
    background-image: -ms-linear-gradient(@direction, @a 0, @b 100%);
    background-image: linear-gradient(to @direction, @a, @b);
}

// 利用边框制作小三角
.triangle(@type: bottom, @x: 10px, @c: #999, @y: @x) {
    display: inline-block;
    width: 0;
    height: 0;
    overflow: hidden;
    vertical-align: middle;
    // 这里有意利用IE6对dashed渲染缺陷解决IE6不支持transparent的问题 
    @transparent: @y dashed transparent;
    // 该特殊边框的大小必须小于其他边框大小的四倍，否则IE6会有问题 
    @special: @x solid @c;
    .border();
    .border() when (@type =bottom) {
        border-bottom: @special;
        border-left: @transparent;
        border-right: @transparent;
    }
    .border() when (@type =top) {
        border-top: @special;
        border-left: @transparent;
        border-right: @transparent;
    }
    .border() when (@type =left) {
        border-left: @special;
        border-top: @transparent;
        border-bottom: @transparent;
    }
    .border() when (@type =right) {
        border-right: @special;
        border-top: @transparent;
        border-bottom: @transparent;
    }
}

// 鼠标经过旋转
.rotate(@d: 180deg, @s: .3s) {
    -webkit-transition: @s ease-in;
    -ms-transition: @s ease-in;
    transition: @s ease-in;
    &:hover, &-hover {
        -webkit-transform: rotate(@d);
        -ms-transform: rotate(@d);
        transform: rotate(@d);
    }
}

// 去色(不兼容低版本Safari、Opera和某些firefox), 一般用于哀悼日)
.grayscale() {
    -webkit-filter: grayscale(100%);
    -webkit-filter: grayscale(1);
    /* Chrome 19+ & Safari 6+ */
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

.clip(@t: 0px, @r: 0px, @b: 0px, @l: 0px) {
    position: absolute;
    clip: rect;
    /* 矩形剪裁只能作用于 position:absolute|fixed 的元素上 */
    clip: rect(@t @r @b @l);
    /* IE6, IE7 */
    clip: rect(@t, @r, @b, @l);
}

.user-select(@select: auto) {
    -webkit-user-select: @select;
    /* 文字是否能被选中 */
    -ms-user-select: @select;
    user-select: @select;
}

// 图片水平垂直居中: 图片为正方形居佳
.image-center(@w, @h) {
    @width: unit(@w);
    @height: unit(@h);
    @_fontsize: (@height * 0.873);
    width: ~'@{width}px';
    height: ~'@{height}px';
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
    *display: block; //IE hack
    *font: ~"@{_fontsize}px/1em Arial";
    img {
        display: inline;
        max-height: 100%;
        max-width: 100%;
        vertical-align: middle;
    }
}

// CSS3 "栅格化"(flexbox)
.display-flex() {
    display: -webkit-box;
    /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -ms-flexbox;
    /* IE 10 */
    display: flex;
    // -webkit-box-align: center;
    // -webkit-align-items: center;
    // align-items: center;
    // -webkit-box-pack: center;
    // -ms-flex-pack: center;
    // justify-content: center;
}

.box-flex(@a) {
    -webkit-flex: @a;
    -ms-flex: @a;
    flex: @a;
}

// 自定义less 混合函数
// 圆角
.border-radius(@a: 3px) {
    -webkit-border-radius: @a;
    -ms-border-radius: @a;
    border-radius: @a;
}

//变形
.transform(@all, @s: center) {
    -ms-transform: @all;
    -webkit-transform: @all;
    transform: @all;
    -webkit-transform-origin: @s;
    -ms-transform-origin: @s;
    transform-origin: @s;
}

//过渡
.transition(@all) {
    -ms-transition: @all;
    -webkit-transition: @all;
    transition: @all;
}

//常用过渡
.transiton() {
    -webkit-transition: all .8s ease-in-out;
    -ms-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}


/*可以自定义修改*/

//动画
.animation(@all) {
    -ms-animation: @all;
    -webkit-animation: @all;
    animation: @all;
}

//常用动画
.animaton(@name) {
    -ms-animation: @name 1s 0s 1 ease both;
    -webkit-animation: @name 1s 0s 1 ease both;
    animation: @name 1s 0s 1 ease both;
}

//字体特效
.text-shadow-light(@blur: 2px) {
    text-shadow: 0px 0px @blur white;
    /*可发挥想象定义常用字体特效*/
}

//盒子阴影
.box-shadow( @a: 0 0 10px rgba(0, 0, 0, .25);
) {
    -webkit-box-shadow: @a;
    -moz-box-shadow: @a;
    box-shadow: @a;
}

//文字旋转
.text-rotate(@angle: 45deg) {
    -webkit-transform: rotate(@angle);
    -moz-transform: rotate(@angle);
    transform: rotate(@angle);
}

//去掉手持设备点击时出现的透明层(一般在头部做格式化)
.delete-highlight() {
    a, button, input {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-tap-highlight-color: transparent;
        /* For some Androids */
    }
}

//去掉苹果浏览器自带input[submit/reset/button]的ui渲染效果
.delete-appearance() {
    input[type="submit"], input[type="reset"], input[type="button"], button {
        -webkit-appearance: none;
    }
}

// 为表单控件中每个文本域提供占位符（Placeholder）文本的颜色
.placeholder(@color: @input-color-placeholder) {
    &::-moz-placeholder {
        color: @color;
    } // Firefox
    &:-ms-input-placeholder {
        color: @color;
    } // Internet Explorer 10+
    &::-webkit-input-placeholder {
        color: @color;
    } // Safari and Chrome
}

@import 'var.less';